import anime from "animejs";

// 点击动画
export const clickAnimation = (
  id: string,
  duration: number,
  callback: Function
) => {
  if (!id) return;
  if (id === "backConfirm") {
    // 返回音效
    playSound("clickBackMusic");
  } else {
    // 通用音效
    playSound("clickMusic");
  }
  const el = document.getElementById(id);
  anime({
    targets: el, // 目标元素为触发点击事件的元素（即按钮）
    scale: [0.9, 1], // 缩放比例从0.9到1
    duration: duration || 200, // 动画持续时间为200毫秒
    easing: "easeOutQuad", // 使用二次方缓动函数
    loop: false, // 不循环播放
    complete: callback,
  });
};

// 弹窗出现\消失动画
export const dialogVisibleAnimation = (
  id: string,
  duration: number,
  isVisible: boolean,
  callback: Function | null
) => {
  if (!id) return;
  const el = document.getElementById(id);
  anime({
    targets: el,
    opacity: isVisible ? 1 : 0,
    duration: duration || 200,
    easing: "easeOutElastic(1, 40)",
    complete: callback,
  });
};

// 闪烁动画
export const blinkAnimation = (id: string) => {
  if (!id) return;
  const el = document.getElementById(id);
  anime({
    targets: el,
    scale: [0.9, 1],
    duration: 1000,
    easing: "easeOutElastic(1, 40)",
  });
};

// 播放音效
export const playSound = (id: string) => {
  const yes = document.getElementById("clickYesMusic");
  const no = document.getElementById("clickNoMusic");
  if (!yes.paused) {
    yes.currentTime = 0;
  }
  if (!no.paused) {
    no.currentTime = 0;
  }
  document.getElementById(id).play();
};
